<template>
  <j-modal
    switchFullscreen
    :title="title"
    :width="500"
    :visible="visible"
    :maskClosable="false"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">
    <template slot="footer">
      <a-button @click="handleCancel">取消</a-button>
      <a-button @click="handleOk" type="primary" v-if="!disableSubmit">确认</a-button>
    </template>
    <!--    <div class='info-line'>基础设置</div>-->
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-row :gutter="24">
          <!--          所属区域-->
          <!--          <a-col :md='24' :sm='24'>-->
          <!--            <a-form-item-->
          <!--              :labelCol='labelCol'-->
          <!--              :wrapperCol='wrapperCol'-->
          <!--              label='最终经销商编号'-->
          <!--              >-->
          <!--              <a-input placeholder='请输入' v-decorator="['regionManager', ]" />-->
          <!--            </a-form-item>-->
          <!--          </a-col>-->
          <a-col :md="24" :sm="24">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="经销商编号"
            >
              <a-input-search v-decorator="['customerCode',validatorRules.userCode]"
                              readOnly enter-button @search="custSearch('superiorUser')" :disabled="disableSubmit"/>
              <a-input type="hidden" v-decorator="['customerCode',validatorRules.userCode]"/>
            </a-form-item>
          </a-col>
          <a-col :md="24" :sm="24">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="经销商名称"
              >
              <a-input placeholder="请输入" disabled="true" v-decorator="['customerName']"/>
            </a-form-item>
          </a-col>

          <a-col :md="24" :sm="24">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="联系人"
              >
              <a-input placeholder="请输入" :disabled="disableSubmit" v-decorator="['contacts', ]"/>
            </a-form-item>
          </a-col>
          <a-col :md="24" :sm="24">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="联系方式"
              >
              <a-input placeholder="请输入" :disabled="disableSubmit" v-decorator="['contactPhone', ]"/>
            </a-form-item>
          </a-col>
          <a-col :md="24" :sm="24">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="收货地区"
              >
              <a-input placeholder="请输入" :disabled="disableSubmit" v-decorator="['receivedGoodsAddress']"/>
              <!--              <cn-area-linkage v-model='belongRegion' type='cascader' :province.sync='form.province'-->
              <!--                              :city.sync='form.city' :area.sync='form.area' @change='handlePca' />-->
            </a-form-item>
          </a-col>
          <a-col :md="24" :sm="24">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="详细地址"
              >
              <a-input placeholder="请输入" :disabled="disableSubmit" v-decorator="['detailAddress', ]"/>
            </a-form-item>
          </a-col>
          <a-col :md="24" :sm="24">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="回款账号"
              >
              <a-input placeholder="请输入" :disabled="disableSubmit" v-decorator="['receivableAccount', ]"/>
            </a-form-item>
          </a-col>
          <a-col :md="24" :sm="24">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="开户银行"
              >
              <a-input placeholder="请输入" :disabled="disableSubmit" v-decorator="['customerBank', ]"/>
            </a-form-item>
          </a-col>
          <a-col :md="24" :sm="24">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="返佣对象"
              >
              <a-input placeholder="请输入" :disabled="disableSubmit" v-decorator="['rebateObj', ]"/>
            </a-form-item>
          </a-col>
          <a-col :md="24" :sm="24">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="备注"
              >
              <a-textarea placeholder="请输入" :disabled="disableSubmit" v-decorator="['remarks', ]"/>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
    <proChose ref="prochoose" v-bind="modalProps" @okbro="okbropro"></proChose>
  </j-modal>
</template>

<script>
import proChose from '@comp/cn-components/ProChose'
import { getAction, httpAction, postAction } from '@/api/manage'
import { pick } from 'lodash'
import moment from 'moment'
import JTreeSelect from '@/components/cn-form/JTreeSelect'
import JAreaLinkage from '@comp/cn-form/CnAreaLinkage'
import { isMobile, isPermit } from '@/utils/validate'
import UploadImage from '@/components/upload-image/UploadImage'
import JImageUpload from '@/components/cn-form/JImageUpload'
import Area from '@/components/utils/Area'

export default {
  name: 'finalGroupModel',
  data() {
    return {
      sendPro: false,
      remarks: '',
      dataSurces: [],
      // dataSurces3: [],
      manobjList: [0],
      areaData: '',
      areaLinkage: '',
      title: '操作',
      visible: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 19 }
      },
      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules: {
        userCode: {
          rules: [
            { required: true, message: '' }
          ]
        },
        telephone: {
          rules: [
            { required: true, message: '', trigger: 'submit' },
            {
              validator: function (rule, value, callback) {
                if (!isMobile(value)) {
                  callback(new Error(''))
                }
                callback()
              }
            }
          ]
        },
        businessLicense: {
          rules: [
            { required: true, message: '', trigger: 'submit' },
            {
              validator: function (rule, value, callback) {
                if (!isPermit(value)) {
                  callback(new Error(''))
                }
                callback()
              }
            }
          ]
        },
        terminalName: {
          rules: [
            { required: true, message: '' }
          ]
        },
        warehouseName: {
          rules: [
            { required: true, message: '' }
          ]
        },
        address: {
          rules: [
            { required: true, message: '' }
          ]
        }
      },
      addOrUpdateUrl: window._CONFIG['domianURL'] + '/cnTerminalController/saveOrUpdateTerminal'
    }
  },
  components: { JTreeSelect, JAreaLinkage, UploadImage, JImageUpload, proChose },
  created() {
    // console.log(this.areaData);
    this.initAreaData()
  },
  computed: {
    modalProps() {
      return {
        name: this.name
      }
    }
  },
  methods: {
    okbropro(val, status, status2) {
      // console.log('数据',val)
      let objs = JSON.parse(JSON.stringify(val[0]))
      console.log('弹出框数据', objs)
      this.form.setFieldsValue({
        customerCode: objs.customerCode,
        customerName: objs.customerName
      })
    },
    add() {
      this.edit()
    },
    edit(record) {
      this.form.resetFields()
      this.model = Object.assign({}, record)
      this.visible = true
      let fieldsVal = pick(this.model, 'customerCode', 'customerName', 'contacts', 'contactPhone', 'receivedGoodsAddress', 'detailAddress', 'receivableAccount', 'customerBank', 'rebateObj', 'remarks')
      this.$nextTick(() => {
        this.form.setFieldsValue(fieldsVal)
      })
    },
    initAreaData() {
      if (!this.areaData) {
        this.areaData = new Area()
      }
    },
    handlePca(code) {
      let cities = this.areaData.getText(code, '多个值').cities
      this.model.province = cities.split('/')[0]
      this.model.city = cities.split('/')[1]
      this.model.area = cities.split('/')[2]
    },

    handleCancel() {
      this.$emit('close')
      this.visible = false
      this.confirmLoading = false
    },
    handleOk() {
      let that = this
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true
          // that.model.receivedGoodsAddress=this.model.province+this.model.city+this.model.area
          let formData = Object.assign(that.model, values)
          console.log('数据', formData)
          postAction('/customer/cnPurchaseCustomer/saveOrUpdate', formData).then((res) => {
            if (res.success) {
              that.$message.success(res.message, 2)
              that.$emit('ok')
              that.handleCancel()
            } else {
              that.$message.error(res.message, 2)
            }
          }).finally(() => {
            that.confirmLoading = false
          })

        }
      })
    },
    custSearch(status) {
      // console.log('数据',status)
      this.$refs.prochoose.rowKey = 'id'
      let formconfig = [
        {
          key: 'customerCode',
          label: '经销商编号'
        },
        {
          key: 'customerName',
          label: '经销商名称'
        }
      ]
      let tableconfig = {
        columns: [
          {
            title: '经销商编号',
            align: 'center',
            dataIndex: 'customerCode',
            width: 120,
            ellipsis: true
          },
          {
            title: '经销商名称',
            align: 'center',
            dataIndex: 'customerName',
            width: 120,
            ellipsis: true
          }
        ],
        list: window._CONFIG['domianURL'] + '/customer/cnCustomer/findPageListByOrgCode',
        orgCode: '1000',
        multiple: false,
        columW: 8
      }
      let dataSource = []
      if (this.form.getFieldValue('superiorUser')) {
        dataSource = [{
          userName: this.form.getFieldValue('superiorUser'),
          realName: this.form.getFieldValue('realName'),
        }]
      }
      this.name = '经销商'
      this.$refs.prochoose.isorter = { permflag: 'purchase_customer_page_impl_add_cust' }
      this.$refs.prochoose.edit(formconfig, tableconfig, 'superiorUser', 'realsname', dataSource)
    },
  }
}
</script>

<style lang="less" scoped>
.info-line {
  display: flex;
  flex-direction: row;
}

.info-line:before {
  content: "";
  flex: 0.1;
  border-bottom: 1px solid #ebedee;
  margin: auto 4px;
}

.info-line:after {
  content: "";
  flex: 0.9;
  border-bottom: 2px solid #ebedee;
  margin: auto 4px;
}
</style>